import Wrapper from './style.ts'
import logo from "@/static/imgs/Login/logo_blue.png";
import bg from "@/static/imgs/Register/bg.png";
import teacher from "@/static/imgs/Register/teacher.b1111283.svg";
import student from "@/static/imgs/Register/student.0ba0711e.svg";
import {Button, Form, FormProps, Input} from "antd";
import {useEffect, useState} from "react";
import classNames from "classnames";
import {useNavigate} from "react-router-dom";
import {getCode, registerApi} from "@/api/common/registerApi.ts";

const Register = () => {

    // 切换身份
    const [currentRole, setCurrentRole] = useState('老师');

    const navigate = useNavigate()

    const inputStyle = {
        height: '48px',
        paddingTop: '4px',
        paddingBottom: '4px',
        lineHeight: '36px'
    }

    const btnStyle = {
        width: '100%',
        marginTop: '12px',
        height: '48px',
        paddingTop: '4px',
        paddingBottom: '4px',
        padding: '10px 20px',
        fontSize: '14px',
        borderRadius: '4px',
        color: '#fff',
        backgroundColor: '#4285f4',
        borderColor: '#4285f4',
    }

    type FieldType = {
        code: string,
        account: string,
        password: string,
        faculty: string,
        sno: string,
        confirm: string,
        name: string,
        school: string,
        stuId: string,
        calculate?: string,
    };

    const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
        const data = {
            ...values,
            identity: currentRole
        }
        registerApi(data).then(res => {
            if (res.status === 200) {
                navigate('/')
            }
        })
    };

    const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    const [codeImg, setCodeImg] = useState('')
    useEffect(() => {
        // 获取验证码
        getCode().then(res => {
            setCodeImg(res.data)
        })
    }, [])


    return (
        <Wrapper>
            <div className="register">
                <div className="logo">
                    <img src={logo} alt=""/>
                </div>
                <div className="register-content">
                    <div className="left">
                        <img src={bg} alt=""/>
                    </div>
                    <div className="right">
                        <div className="right-content">
                            <div className="title">
                                注册账号
                            </div>
                            <div className="form">
                                <Form
                                    name="basic"
                                    labelCol={{span: 8}}
                                    wrapperCol={{span: 32}}
                                    style={{maxWidth: 600}}
                                    initialValues={{remember: true}}
                                    onFinish={onFinish}
                                    onFinishFailed={onFinishFailed}
                                    autoComplete="off"
                                >
                                    <Form.Item<FieldType>
                                        name="account"
                                        rules={[{required: true, message: '格式不正确'}]}
                                    >
                                        <Input style={inputStyle} placeholder={'请输入邮箱/手机号'}/>
                                    </Form.Item>

                                    <Form.Item<FieldType>
                                        name="password"
                                        rules={[{required: true, message: '密码安全强度不足'}]}
                                    >
                                        <Input.Password style={inputStyle} placeholder={'请输入密码'}/>
                                    </Form.Item>

                                    <Form.Item<FieldType>
                                        name="confirm"
                                        rules={[{required: true, message: '两次密码输入不一致'}]}
                                    >
                                        <Input.Password style={inputStyle} placeholder={'请再次输入密码确认'}/>
                                    </Form.Item>

                                    <div className="role">
                                        <p className='role-title'>请选择身份</p>
                                        <div className="role-box">
                                            <div
                                                onClick={() => {
                                                    setCurrentRole('老师')
                                                }}
                                                className={classNames('item', currentRole === '老师' ? 'active' : '')}>
                                                <img src={teacher} alt=""/>
                                                <span>老师</span>
                                            </div>
                                            <div
                                                onClick={() => {
                                                    setCurrentRole('学生')
                                                }}
                                                className={classNames('item', currentRole === '学生' ? 'active' : '')}>
                                                <img src={student} alt=""/>
                                                <span>学生</span>
                                            </div>
                                        </div>
                                    </div>

                                    <Form.Item<FieldType>
                                        name="name"
                                        rules={[{required: true, message: '请输入姓名'}]}
                                    >
                                        <Input style={inputStyle} placeholder={'请输入姓名'}/>
                                    </Form.Item>
                                    <Form.Item<FieldType>
                                        name="faculty"
                                        rules={[{required: true, message: '请选择学校'}]}
                                    >
                                        <Input style={inputStyle} placeholder={'请输入学校/机构'}/>
                                    </Form.Item>
                                    <div style={{display: 'flex', justifyContent: 'space-between'}}>
                                        <Form.Item<FieldType>
                                            name={'code'}
                                            rules={[{required: true, message: '请输入验证码'}]}
                                        >
                                            <Input style={inputStyle} placeholder={'请输入验证码'}/>
                                        </Form.Item>
                                        <img height={'48px'} src={codeImg} alt=""/>
                                    </div>
                                    <Form.Item<FieldType>
                                        style={{display: currentRole === '老师' ? 'none' : 'block'}}
                                        name="sno"
                                        rules={[{required: currentRole === '学生', message: '请输入学号'}]}
                                    >
                                        <Input style={inputStyle} placeholder={'请输入学号'}/>
                                    </Form.Item>
                                    <Form.Item style={{marginBottom: '0'}}>
                                        <Button style={btnStyle} type="primary" htmlType="submit">
                                            注册
                                        </Button>
                                    </Form.Item>
                                    <div className='bottom'>
                                        <p>已有账号?</p>
                                        <a onClick={() => {
                                            navigate('/')
                                        }}>去登录</a>
                                    </div>
                                </Form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </Wrapper>
    )
}
export default Register